<script setup lang="ts">
import IconSvg from "@/components/IconSvg/index.vue";

const modules = import.meta.glob("@/assets/iconsvg/*.svg", { eager: true, import: "default" });

const list = Object.entries(modules).map((item: any) => {
	const name = item[0].replace("/src/assets/iconsvg/", "").replace(".svg", "");
	return name;
});
const item = ref("");
const onClick = (name: string) => {
	item.value = name;
};
</script>
<template>
	<el-card shadow="never">
		<div v-for="(name, index) in list" :index="index" :key="index" style="display: inline-block">
			<div :class="{ 'v-icon': true, 'v-icon-select': item === name }" v-copy="name" @click="onClick(name)">
				<IconSvg :name="name" class="icon" :iconStyle="{ 'font-size': '26px' }" />
			</div>
		</div>
	</el-card>
</template>

<style lang="scss" scoped>
.v-icon {
	padding: 10px;
	margin: 0 5px 5px;
	text-align: center;
	cursor: pointer;
	border-radius: 4px;
}
.v-icon-select {
	color: #ffffff;
	background: #409eff;
}
</style>
